<div *ngIf="destination$ | async as item" fxLayout="column" fxLayoutAlign="start stretch" class="pac-edit-destination__editor">
    <form [formGroup]="formGroup">
        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input matInput formControlName="name" required>
            <mat-error *ngIf="nameCtrl.invalid">Name required</mat-error>
        </mat-form-field>
    </form>

    <formly-form
        [form]="options"
        [fields]="item.schema"
        [model]="item.destination.options"
        >
    </formly-form>

    <div fxLayout="row" fxLayoutAlign="space-between stretch">
        <button mat-raised-button color="primary" [disabled]="formGroup.pristine||formGroup.invalid"
            (click)="onSave()">Save</button>
        <button mat-raised-button [disabled]="formGroup.pristine" (click)="onCancel()">Cancel</button>
    </div>
</div>
